/**
 * form  models
 */
var mod_fwk_base_form = Backbone.Model.extend({
	defaults: {
		formId: 'generic-form-' + new Date().getTime().toString(),
		fields: new Array(),
		action: '#',
		method: 'GET',
		onSubmit: null
	},
	addField: function(mod_form_field){
		var fields = this.get('fields');
		var fieldName = mod_form_field.get('name');
		if($.inArray(fieldName, this.fields) == false){
			fields.push(fieldName);
			this.set('fields', fields);
		}
	}
});

var mod_fwk_base_form_field = Backbone.Model.extend({
	defaults: function(){
		return {
			label: null,
			type: 'text',
			value: '',
			name: 'field-' + new Date().getTime().toString(),
			selectOptions: new Array(),
			onChange: null
		};
	}
});

var coll_fwk_base_form_fields = Backbone.Collection.extend({
	model: mod_fwk_base_form_field,
	addField: function(label, type, value, name, selectOptions, onChange){
		if(type == 'button') label = null;
		var formField = new mod_fwk_base_form_field({
			label: label,
			type: type,
			value: value,
			name: name,
			selectOptions: selectOptions,
			onChange: onChange
		});
		this.add(formField);
		return formField;
	},
	getTypes: function(){
		var types = {};
		 _.each(this.models, function(model){
			types[model.get('name')] = model.get('type');
		});
		return types;
	}
});

/**
 *form views
 */
var vie_fwk_base_form = vie_fwk_base.extend({
	tagName: 'form',
	className: 'form-horizontal',
	formFields: null,
	events: {
		'click button': 'formSubmit'
	},
	initialize: function(){
		this.formFields = new Array();
		this.observeModel();
		this.setFields();
	},
	render: function(){
		$(this.el).attr('id', this.model.get('formId'));
		_.each(this.formFields, function(fieldView, iter){
			$(this.el).append(fieldView.render().el);
		}, this);
		return this;
	},
	formSubmit: function(ev){
		var onSubmitHandle = this.model.get('onSubmit');
		if(onSubmitHandle != null){
			onSubmitHandle.call(this, this, ev);
		}
	},
	getValues: function(){
		var values = {};
		_.each(this.formFields, function(formField){
			values[formField.model.get('name')] = formField.getValue();
		});
		return values;
	},
	setFields: function(collection){
		if(typeof collection == 'undefined' || collection == null){
			collection = this.collection;
		}
		var that = this;
		_.each(collection.models, function(formField){
			formFieldView = new vie_fwk_base_form_field({model: formField});
			that.formFields.push(formFieldView);
			that.model.addField(formField);
		});
	}
});

var vie_fwk_base_form_field = vie_fwk_base.extend({
	tagName: 'div',
	className: 'control-group',
	events:{
		'change input': 'fieldChanged',
		'change textarea': 'fieldChanged',
		'change select': 'fieldChanged'
	},
	initialize: function(){
		this.observeModel();
		this.setTemplate('tpl-form-field');
	},
	render: function(){
		$(this.el).attr('id', this.model.get('name') + '-container');
		var modelJson = this.model.toJSON();
		if(modelJson.type == 'multiselect'){
		    modelJson.value = modelJson.value.join(',');
		}
		$(this.el).html(this.template(modelJson));
		if(this.model.get('type') == 'select'){
		    if(this.model.get('value') == '' || this.model.get('value') == null){
		        $(this.el).find('select').append($('<option value="">&nbsp;<option>'))
		    }
            $(this.el).find('select').val(this.model.get('value')); 
		}else if(this.model.get('type') == 'multiselect'){
		    if(this.model.get('value').length == 0){
                //$(this.el).find('select').append($('<option value=""><option>'));
                //$(this.el).find('select').val(''); 
            }
		}
		
		return this;
	},
	fieldChanged: function(ev){
		var onChangeHandle = this.model.get('onChange');
		if(onChangeHandle != null){
			onChangeHandle.call(this, this, ev);
		}
	},
	getValue: function(){
		var value = null;
		switch(this.model.get('type')){
			case 'text':
				value = $(this.el).find('input[type="text"]').val();
				break;
			case'textarea':
				value = $(this.el).find('textarea').val();
				break;
			case 'select':
				value = $(this.el).find('select').val();
				break;
			case 'multiselect':
                value = JSON.parse($('#' + $(this.el).find('select').attr('id') + '-multiselect').attr('data-values'));
                break;
			case 'date':
		        var dateFieldId = this.$el.find('input').attr('id');
		        value = $('#' + dateFieldId, this.$el).mobiscroll('getDate');
			    break
			default: 
				value = $(this.el).find('input').val();
				break;
		}
		if($.trim(value) == '') value = null;
		return value;
	}
});
